<template>
	<view>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="编辑内容" :value="popValue" placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="inputDialog1" type="dialog">
			<uni-popup-dialog ref="inputClose1" mode="input" title="输入内容" :value="addPopV" placeholder="请输入内容" @confirm="dialogInputConfirm1"></uni-popup-dialog>
		</uni-popup>
		<!-- <uni-section title="常用语" type="line"></uni-section> -->
		<view class="">
			<uni-swipe-action ref="swipeAction">
				<uni-swipe-action-item
					v-for="(item, index) in swipeList"
					:right-options="options1"
					:key="item.id"
					@change="swipeChange($event, index)"
					@click="swipeClick($event, item)"
				>
					<view class="content-box">
						<text class="content-text">{{ item.content }}</text>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view style="height: 180rpx"></view>
		<view class="bottomBtn">
			<button @click="inputDialogToggle1" class="btn-addtxt">添加内容</button>
		</view>
	</view>
</template>

<script>
import { addLanguages, getLanguages, delLanguages, ediotrLanguages } from '@/api/system/user.js';
export default {
	components: {},
	data() {
		return {
			show: false,
			isOpened: 'none',
			Alcontent: '',
			UserId: '',
			popValue: '',
			addPopV: '222',
			options1: [
				{
					text: '编辑',
					style: {
						backgroundColor: '#007aff'
					}
				},
				{
					text: '删除',
					style: {
						backgroundColor: 'rgb(255,58,49)'
					}
				}
			],
			swipeList: ''
		};
	},
	onReady() {
		try {
			this.UserId = uni.getStorageSync('userID');
			if (this.UserId) {
				console.log(this.UserId);
			}
		} catch (e) {
			// error
		}
		this.getComMange();
	},
	watch: {
		addPopV(newV, oldV) {
			console.log('newV', newV);
			console.log('oldV', oldV);
		}
	},
	methods: {
		//获取常用语
		getComMange() {
			getLanguages(this.UserId).then((res) => {
				this.swipeList = res.data.map((item) => {
					return {
						id: item.id,
						content: item.text
					};
					// item.content = item.text;
				});
				// console.log(this.swipeList);
			});
		},
		addComMange() {
			let data = {
				userId: this.UserId,
				text: this.Alcontent
			};
			addLanguages(data).then((res) => {
				// console.log(res);
			});
			this.getComMange();
		},
		//编辑常用语内容
		editorComMange() {
			let data = {
				id: this.editorId,
				text: this.Alcontent
			};
			console.log(data);
			ediotrLanguages(data).then((res) => {
				// console.log(res);
			});
			this.getComMange();
		},
		contentClick() {
			console.log('点击内容');
			uni.showToast({
				title: '点击内容',
				icon: 'none'
			});
		},
		//编辑的弹窗同意
		async dialogInputConfirm(val) {
			// uni.showLoading({
			// 	title: '3秒后会关闭'
			// });

			// uni.hideLoading();
			console.log(val);
			this.Alcontent = val;
			// 关闭窗口后，恢复默认内容
			this.$refs.inputDialog.close();

			await this.editorComMange();
			this.getComMange();
		},
		async dialogInputConfirm1(val) {
			// uni.showLoading({
			// 	title: '3秒后会关闭'
			// });

			// uni.hideLoading();
			this.addPopV = '';
			console.log(val);
			this.Alcontent = val;
			// 关闭窗口后，恢复默认内容
			this.$refs.inputDialog1.close();

			await this.addComMange();
			this.getComMange();
			this.addPopV = 'fewf';
			// this.Alcontent = '';
		},
		inputDialogToggle1() {
			this.$refs.inputDialog1.open();
			this.addPopV = '';
		},
		swipeChange(e, index) {
			// console.log('返回：', e);
			// console.log('当前索引：', index);
		},
		swipeClick(e, item) {
			let { content } = e;
			if (content.text === '删除') {
				uni.showModal({
					title: '提示',
					content: '是否删除',
					success: (res) => {
						// console.log(res);
						if (res.confirm) {
							delLanguages(item.id).then((res) => {
								this.getComMange();
							});
							// console.log(item);
							// this.swipeList.splice(index, 1);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			} else if (content.text === '编辑') {
				this.popValue = item.content;
				this.editorId = item.id;
				this.$refs.inputDialog.open();
			} else {
				uni.showToast({
					title: `点击了${e.content.text}按钮`,
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style lang="scss">
.content-box {
	flex: 1;
	/* #ifdef APP-NVUE */
	justify-content: center;
	/* #endif */
	height: 44px;
	line-height: 44px;
	padding: 0 15px;
	position: relative;
	background-color: #fff;
	border-bottom-color: #f5f5f5;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.content-text {
	font-size: 15px;
}

.example-body {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: center;
	padding: 10px 0;
	background-color: #fff;
}
.bottomBtn {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 180rpx;
	background: #fff;
}
.btn-addtxt {
	margin-top: 20rpx;
	width: 50%;
	background: #fe8124;
	border: none;
	border-radius: 20px;
	color: #fff;
}
// position: fixed;
//     bottom: 6%;
//     left: 50%;
//     transform: translateX(-50%);
</style>
